<template>
	<view class="content display displayColumn width_750 fontSize font_comm">
		<u-navbar @rightClick="rightClick" :autoBack="true" bgColor="transparent" >
			<template slot="left">
				<uni-icons type="left" color="#fff;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<!-- <text class="fontSize font_comm title">上传企业资料</text> -->
			</template>
		</u-navbar>
		<view class="fn_content display  displayColumn width_750">
			<!-- 图片背景 -->
			<view class="fn_ngimgs display  width_750">
				<image class="images" :src="info.url" mode=""></image>
			</view>
			<!-- 套餐销量 -->
			<view class="taocan display  width_750   displayColumn">
				<!-- 1 -->
				<view class="fn_one display  displayColumn width-699 displaycenter_jus M-T30 M-L30">
					<view class="one_item display  displaycenter_aliem width-100" style="justify-content: space-between;">
						<span class="fn_txt1 M-L24">￥<span style="font-size: 40rpx;">{{info.realPrice}}</span></span>
						<span class="fn_txt2 M-R24">销量{{info.totalSales || 0}}</span>
					</view>
					<view class="two_item display  displaycenter_aliem M-T12">
						<span class="fn_txt3 M-L24">{{info.goodsName}}</span>
					</view>
					<view class="three_item display  displaycenter_aliem M-T12">
						<span class="fn_txt4 M-L24">{{info.productDesc}}</span>
					</view>
					<view class="four_item display  displaycenter_aliem M-T12">
						<view class="fout_left display  all_item M-L24">
							<span class="fn_txt5 ">{{info.rules}}</span>
						</view>
						<view class="fout_right display  all_item M-L12">
							<span class="fn_txt5 " style="color:#126BC9;">限制数量：{{info.limitNum || 0}}</span>
						</view>
					</view>
				</view>
			</view>
			<span class="fn_ttx1 M-L30 M-T30 display" >购买须知</span>
			<!--  -->
			<view class="fn_ehk display  width-100 displayColumn displaycenter_jus  M-L30 M-T20" style="text-align: left;">
				<span class="fn_ttx2 M-L24" >可用日期</span>
				<span class="fn_ttx3 M-L24" style="margin-top: 4rpx;">{{info.validityDay}}</span>
				<span class="fn_ttx2 M-L24" style="margin-top: 20rpx;">可用时间</span>
				<span class="fn_ttx3 M-L24" style="margin-top: 4rpx;">{{info.validityTime}}</span>
				<span class="fn_ttx2 M-L24" style="margin-top: 20rpx;">限用数量</span>
				<span class="fn_ttx3 M-L24" style="margin-top: 4rpx;">{{info.limitNum}}</span>
				<span class="fn_ttx2 M-L24" style="margin-top: 20rpx;">预约规则</span>
				<span class="fn_ttx3 M-L24" style="margin-top: 4rpx;">{{info.rules}}</span>
				<span class="fn_ttx2 M-L24" style="margin-top: 20rpx;">其他规则</span>
				<span class="fn_ttx3 M-L24" style="margin-top: 4rpx;">{{info.remark}}</span>
				<!-- <span class="fn_ttx3 M-L24" style="margin-top: 4rpx;">不与店内优惠活动共享</span> -->
				<!-- <span class="fn_ttx3 M-L24" style="margin-top: 4rpx;">不与店内优惠活动共享</span> -->
			</view>
			<view class="fn_bgcolor display  width_750 M-T36 displayColumn">
				
				<image class="image2" :src="itns" mode="" v-for="(itns,indhs) in arr" :key="indhs"></image>
			</view>
			
		</view>
		<view class="display " style="width: 100%;height: 180rpx;">
			
		</view>
		<view class="wode_fn_all display  width-100">
			<view class="wode_all_iii display  width-100 all_item" style="height: 166rpx;">
				<button open-type="contact"
					style="width: 80%;height: 30%;position: absolute;border: 1rpx solid red;left: 0;opacity: 0;">客服</button>
					<image style="width: 35rpx;height: 32rpx;" class="M-L30" src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2024/12/24/cde73c70dbf641a6b636999a22510281.png" mode=""></image>
				<span class="fn_images M-L8">联系客服</span>
				<button class="wode_btn display all_item" style="margin-left: 144rpx;" @click="togoumai">立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				info:{},
				arr:[]
			}
		},
		onLoad(options) {
			
			this.id = options.id;
			this.getDetails();
		},
		methods: {
			getDetails(){
				this.$req.get(`/xcx/productInfo/${this.id}`).then(res=>{
					console.log(res)
					if(res.data.code==200){
						this.info = res.data.data;
						this.arr = this.info.detailUrl
						this.arr = this.arr.split('[')[1];
						this.arr = this.arr.split(']')[0];
						this.arr = this.arr.split(',')
						// console.log(this.arr);
					}else{
						this.$modal.msg(res.data.msg);
					}
					this.$modal.closeLoading();
				})
			},
			togoumai(){
				this.$tab.navigateTo('/packageC/submitOrder/submitOrder?info='+JSON.stringify(this.info))
			}
		}
	}
</script>

<style scoped lang="scss">
.ss{
	background: transparent;
}
.images{
	width: 750rpx;
	height: 566rpx;
	background: linear-gradient( 180deg, #000000 0%, rgba(0,0,0,0) 44%);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.taocan{
	width: 750rpx;
	// height: 1094rpx;
	background: #F4F5FA;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	margin-bottom: 10rpx;
}
.fn_one{
	width: 690rpx;
	// height: 226rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.fn_txt1{
	font-weight: 600;
	font-size: 24rpx;
	color: #FF672D;
}
.fn_txt2{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.fn_txt3{
	font-weight: 600;
	font-size: 28rpx;
	color: #000000;
}
.fn_txt4{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.fout_left{
	// width: 168rpx;
	// height: 34rpx;
	padding: 8rpx;
	background: rgba(255,103,45,0.1);
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.fout_right{
	padding: 8rpx;
	background: rgba(18,107,201,0.1);
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.fn_txt5{
	font-weight: 600;
	font-size: 20rpx;
	color: #FF672D;
}
.fn_ttx1{
	font-weight: 600;
	font-size: 32rpx;
	color: #000000;
}
.fn_ttx2{
	font-weight: 600;
	font-size: 28rpx;
	color: #000000;
}
.fn_ttx3{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.fn_ehk{
	width: 690rpx;
	// height: 602rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.image2{
	width: 750rpx;
	height: 756rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.wode_fn_all{
	position: fixed;
	bottom: 0;
	width: 750rpx;
	height: 166rpx;
	background: rgba(255,255,255,0.8);
	box-shadow: 0rpx -6rpx 47rpx 0rpx rgba(0,0,0,0.05);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.fn_images{
	font-weight: 400;
	font-size: 24rpx;
	color: #212121;
}
.wode_btn{
	width: 406rpx;
	height: 66rpx;
	background: #126BC9;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	font-weight: 600;
	font-size: 24rpx;
	color: #FFFFFF;
}
</style>
